<template>
    <div class='app'>
       <Category title='美食'>
           <img :src="foodUrl" alt="">
       </Category>
       <Category title='游戏'>
           <ul>
               <li v-for="item in gameArr">{{item}}</li>
           </ul>
       </Category>
       <Category title='电影'>
           <video :src="movieUrl" controls></video>
       </Category>
    </div>
</template>

<script>
    import Category from './components/Category'
    export default {
        name:'App',
        components: {
            Category
        },
        data() {
            return {
                foodUrl:'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
                gameArr:['LOL手游','王者荣耀','和平精英','三国杀'],
                movieUrl:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
            }
        },
    }
</script>

<style>
    .app{
        display: flex;
		justify-content: space-around;
    }
</style>